<template>
	<view class="message-list-box left clearfix">
		<view class="message-header-box left clearfix">
			<view class="message-header-content left clearfix">
				<view class="message-header-left left">
					<view class="message-header-title left">消息</view>
					<view class="message-read left">
						<label>
							<uni-icons type="checkbox-filled" size="15" color="#ccc"></uni-icons>
						</label>
						
						<label>
							设为已读
						</label>
						
						</view>
				</view>
				
				<view class="message-header-right right clearfix">
					
				</view>
			</view>
			
			<!--分类开始-->
			<scroll-view class="message-category-box left clearfix" :scroll-x="true">
				<text>物流</text>
				<text>优惠</text>
				<text>售后</text>
				<text>提醒</text>
				<text>赞评</text>
				<text>互动</text>
			</scroll-view>
		</view>
		<view class="message-list-content left clearfix">
			
			
			<view class="message-list-item left clearfix" v-for="(item,index) in data" @click="navigatorToMessage(item)">
				<!--头像-->
				<view class="message-list-image left clearfix relative">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="message-list-number absolute">未读</view>
				</view>
				<view class="message-list-text left clearfix">
					<view class="message-list-nickname left clearfix bai">
						<label class="ellipsis">{{item.nickname}}</label>
						<label>{{item.time}}</label>
					</view>
					<view class="message-list-texts left clearfix ellipsis">
						{{item.content}}
					</view>
					
					<!-- <view class="message-list-texts left clearfix ellipsis" v-if="item.content[item.content.length - 1].type=='image'">
						图片消息
					</view>
					
					<view class="message-list-texts left clearfix ellipsis" v-if="item.content[item.content.length - 1].type=='audio'">
						语音消息
					</view> -->
					
				</view>
			</view>

			
			<view class="loading-more left">
				<up-loadmore :status="loadStatus" color="#999" loadingText="缘分加载中" nomoreText="我已经到底了"/>
			</view>
			
			
		</view>
		<wht-tabbar :centerIndex="3"></wht-tabbar>
	</view>
</template>
<style>
	page,body{background:#fff !important;}
</style>
<style scoped>
	.message-category-box text{float:left;width:16.6%;line-height:1.5rem;height:1.5rem;text-align: center;font-size:.9rem;font-weight:600;}
	.message-category-box{width:100%;height:1.5rem;line-height:1.5rem;margin-top:1.5rem;}
	.message-header-content{width:100%;height:1.2rem;}
	.message-read label{float:left;line-height:1.5rem;height:1.5rem;}
	.message-read{line-height:1.5rem;height:1.5rem;border-radius: .75rem;border:1px solid #eee;background:#f8f8f8;padding-left:.5rem;padding-right:.5rem;margin-left:1rem;font-size:.7rem;color:#999;}
	.message-header-title{font-size:1.1rem;margin-left:.5rem;font-weight:600;}
	.message-header-box{width:100%;height:4.5rem;padding-top:3.5rem;background:#fff;padding-bottom:.5rem;position:fixed;left:0;right:0;top:0;z-index:9999;}
	.message-list-number{padding:.1rem .2rem;min-width:.5rem;min-height:.3rem;background:red;border-radius: 50%;font-size:.6rem;color:#fff;top:-.2rem;right:-.3rem;text-align: center;}
	.message-list-texts{width:90%;line-height:1.5rem;height:1.5rem;font-size:.8rem;color:#999;}
	.message-list-nickname label:last-child{float:right;line-height:1.5rem;font-size:.75rem;color:#ccc;}
	.message-list-nickname label:first-child{font-weight:500;float:left;width:10rem;line-height:1.5rem;}
	.message-list-nickname{line-height:1.5rem;height:1.5rem;}
	.message-list-text{width:calc(100% - 6rem);height:3.5rem;margin:.5rem;border-bottom:1px solid #f2f2f2;}
	.message-list-image image{width:100%;height:100%;border-radius: 5px;border:1px solid #eee;}
	.message-list-image{width:3rem;height:3rem;margin:.5rem;}
	.message-list-item{width:100%;height:4.5rem;margin-bottom:.5px;}
	.message-list-content{width:100%;min-height:10rem;margin-top:9rem;background:#fff;padding-bottom:5.5rem;}
	.message-list-box{width:100%;min-height:30rem;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		data() {
			return {
				userinfo:{},
				data:[
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/10.webp',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/1.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/2.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/3.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/4.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/5.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/6.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/7.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/8.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/9.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					},
					{
						avatar:'https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/avatar/3.jpg',
						nickname:'逆流的小河',
						content:'您感兴趣的宝贝降价了，八折优惠，先到先得，快去抢购吧',
						time:'2025-01-21 12:21'
					}
				],
				loadStatus:'loading',
				currentPage:1
			}
		},
		onPullDownRefresh() {
			 uni.reLaunch({
			     url: '/pages/message/message'
			 })
		      uni.stopPullDownRefresh();
		    },
			onReachBottom(){
			    this.currentPage++;
				this.getData(this.userinfo._id,this.currentPage);
			},
		methods: {
			navigatorToMessage(id){
				uni.navigateTo({
					url:'/pages/message/detail?id='+id
				})
			}
		},
		//查询出聊天窗口
		created() {
			
		}
	}
</script>

